<template>
  <div class="cell">
    <!-- 列表 -->
    <div
      class="cell-item items-center"
      v-for="(item, index) in list"
      :key="item.id"
      :style="{
        'border-bottom':
          index != list.length - 1
            ? '0.7px solid rgba(115, 119, 128, 0.15)'
            : 'none',
      }"
    >
      <!-- 左侧 -->
      <ImgNuxt
        class="cell-left"
        :src="item.avatar || file.avatarDefault"
        :placeholder="file.avatarDefault"
        isHttp
      ></ImgNuxt>
      <!-- 右侧信息 -->
      <div class="cell-right">
        <!-- 昵称 + BDC -->
        <div class="cell-right-top items-center">
          <!-- 昵称 -->
          <div class="cell-right-name">
            {{ userNameToFormat(item.nickname || "") }}
          </div>
          <!-- BDC -->
          <div class="cell-right-bdc">
            +{{ toThousands(decimalToLength(item.amount || 0)) }} BDC
          </div>
        </div>
        <!-- 描述 + 时间 -->
        <div class="cell-right-bottom items-center">
          <!-- 时间 -->
          <div class="cell-right-time">
            {{ item.timeStr }}
          </div>
          <!-- 描述 -->
          <div class="cell-right-desc">
            {{ item.taskTypeShow || "--" }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="inviteFriendsBDCCell">
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    list: any;
  }>(),
  {
    list: [],
  }
);

const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});
</script>
<style scoped lang="scss">
.cell {
  position: relative;
  border-top: 10 * 2px solid #f4f5f7;
  padding: 0 * 2px 15 * 2px;
  background-color: #fff;

  &-item {
    position: relative;
    padding: 14 * 2px 0;
    border-bottom: 0.7px solid rgba(0, 0, 0, 0.1);
  }

  &-left {
    width: 36 * 2px;
    height: 36 * 2px;
    border-radius: 100px;
    overflow: hidden;
    margin-right: 10 * 2px;
  }

  &-right {
    flex: 1;
    width: 100%;
    position: relative;
    // flex-direction: column;
    &-top {
      justify-content: space-between;
      margin-bottom: 8 * 2px;
    }
    &-bottom {
      justify-content: space-between;
    }
    &-name {
      color: #141924;
      font-size: 14 * 2px;
      font-weight: 510;
      white-space: nowrap;
    }

    &-bdc {
      color: #007bff;
      font-size: 14 * 2px;
      font-weight: 600;
      white-space: nowrap;
    }

    &-desc {
      color: #141924;
      font-size: 12 * 2px;
      font-weight: 400;
    }

    &-time {
      color: #999da7;
      font-size: 12 * 2px;
      white-space: nowrap;
      font-weight: 400;
    }
  }
}
</style>
